<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>

    <link rel="stylesheet" href="../lib/element-plus/index.css">
    <style>
        .login-box {
            margin-left: 600px;
            margin-top: 300px;
            max-width: 480px;
        }

    </style>

</head>
<body>

<div id="app">


    <el-card class="login-box">
        <template #header>
            <div class="card-header">
                <span>人事管理系统-登录</span>
            </div>
        </template>
        <el-form label-width="120px">
            <el-form-item label="用户名">
                 <el-input v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="danger" @click="btnLoginClick">登录</el-button>
            </el-form-item>

        </el-form>



    </el-card>


</div>

</body>
<script src="../lib/vue.global.js"></script>
<script src="../lib/element-plus/index.full.js"></script>
<script src="../mock/user.js"></script>
<script>
    var app = Vue.createApp({

        data:function (){
             return {
                  user:{
                       username:'',
                       password:''
                  }
             }
        },methods:{
             btnLoginClick:function (){

                 if(this.user.username==user.username
                     &&this.user.password==user.password){

                     location.href='list.html';
                 }
             }
        }
    });

    app.use(ElementPlus).mount('#app')

</script>
</html>